/* Page: Tasks
=================================================================== */
.task-list {
	background: white;
	padding: 20px;
	margin-top: -30px;
	margin-left: -30px;
	margin-bottom: -30px;
	height: 100%;
}

.graph {
	height: 100%;
}

.priority.high {
	background: lighten(@red, 30%);
	margin-bottom: 1px;
	
	span {
		background: @red;
		padding: 2px 10px;
		color: white;
		display: inline-block;
		font-size: 12px;
	}
}

.priority.medium {
	background: lighten(@lightOrange, 35%);
	margin-bottom: 1px;
	
	span {
		background: @lightOrange;
		padding: 2px 10px;
		color: white;
		display: inline-block;
		font-size: 12px;
	}
}

.priority.low {
	background: lighten(@darkGreen, 35%);
	margin-bottom: 1px;
	
	span {
		background: @darkGreen;
		padding: 2px 10px;
		color: white;
		display: inline-block;
		font-size: 12px;
	}
}

.task {
	border-bottom: 1px solid #f9f9f9;
	margin-bottom: 1px;
	position: relative;
	
	.desc {
		display: inline-block;
		width: 75%;
		padding: 10px 10px;
		font-size: 12px;
		
		.title {
			font-size: 18px;
			margin-bottom: 5px;
		}
		
	}
	
	.time {
		display: inline-block;
		width: 18%;
		padding: 10px 10px 10px 0px;
		font-size: 12px;
		text-align: right;
		position: absolute;
		top: 0px;
		right: 0px;
		
		.date {
			font-size: 18px;
			margin-bottom: 5px;	
		}
	}
}

.task.last {
	border-bottom: 1px solid transparent;
}

.task.high {
	border-left: 2px solid @red;
}

.task.medium {
	border-left: 2px solid @lightOrange;
}

.task.low {
	border-left: 2px solid @darkGreen;
}

.timeline {
	width: auto;
	height: 100%;
	margin: 20px auto;
	position: relative;	 
 	
	&:before {
		position: absolute;
		content: '';
		height: 100%;
		width: 4px;
		background: lighten(@grey,10%);
		left: 50%;
		margin-left:-2px;
	}
}

.timeslot {
	display: inline-block;
	position: relative;	
	width: 100%;
	margin: 5px 0px;
	
	.task {
		position: absolute;
		width: 42%;
		padding-right: 18px;
		display: block;
		height: auto;
		border: none;
		.box-sizing(content-box);
		
		span {
			border: 2px solid @lightBlue;
			background: lighten(@lightBlue, 30%);
			padding: 5px;
			display: block;
			font-size: 11px;
			.border-radius(2px);
			
			span.details {
				font-size: 16px;
				margin-bottom: 10px;
			}

			span.remaining{
				font-size: 14px;
			}
			
			span {
				border: 0px;
				background: transparent;
				padding: 0px;
			}
			
		}
		
		.arrow {
			position: absolute;
			top: 6px;
			right: 0px;
			height: 20px;
			width: 20px;
			background: url(../img/timeline-left-arrow.png) no-repeat;
		}
	}
	
	.icon {
		position: absolute;
		border: 2px solid @lightBlue;
		background: @darkGrey;
		.border-radius(50em);
		height: 30px;
		width: 30px;
		left: 50%;
		margin-left: -16px;
		color: white;
		font-size: 18px;
		line-height: 30px;
		text-align: center;
		text-shadow: none;
		z-index: 2;
		.box-sizing(content-box);
		
	}
	
	.time {
		background: lighten(@grey,10%);
		position: absolute;
		.border-radius(4px);
		top: 1px;		
		left: 50%;
		padding: 5px 10px 5px 40px;
		z-index: 1;
		margin-top: 1px;
	}
	
}

.timeslot.alt {
	
	.task {
		left: auto;
		right: -20px;
		padding-left: 18px;
		.box-sizing(content-box);
		
		.arrow {
			position: absolute;
			top: 6px;
			left: 0px;
			height: 20px;
			width: 20px;
			background: url(../img/timeline-right-arrow.png) no-repeat;
		}
	}
	
	.time {
		top: 1px;
		left: auto;		
		right: 50%;
		padding: 5px 40px 5px 10px;
	}
	
}